.box {
    width: 400px;
    height: 100%;
    display: flex;

    :global {
        .circle-box {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content {
            flex: 1;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;


            .text-item {
                height: 80px;
                height: 50%;
                width: 100%;
                // height: 40px;
                padding: 5px;


                .text-content {
                    padding: 2px;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    box-shadow: inset 0 0 13px #0271ada0;

                    .value {
                        font-size: 20px;
                        font-weight: 600;
                        color: aqua;
                    }

                    .label {}
                }
            }

            .top {
                display: flex;
                height: 80px;


            }

            .bottom {
                width: 100%;
                flex: 1;

                .info-item {
                    display: flex;
                    padding: 6px 20px;
                    display: flex;
                    align-items: center;

                    .icon {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        background-color: #7cffb2;
                        margin: 0 5px;
                    }

                    .color1 {
                        background-color: #4710d3;
                    }

                    .color2 {
                        background-color: #14b0ee;
                    }

                    .color3 {
                        background-color: #dfd218;
                    }


                    .label {
                        color: '#999';
                        display: inline-block;

                    }
                }
            }

        }
    }
}

.progressContent {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 30px;

    :global {
        .item {
            width: 100%;
            font-size: 14px;
            padding: 2px 0px;


        }

        .value {
            color: aqua;
            border-bottom: 2px solid #046f8f6c;

            .text {
                color: aqua;
                font-size: 30px;
                font-weight: 600;
            }

            .prent {
                font-size: 12px;
            }
        }

        .label {
            color: white;
        }
    }
}